<script setup lang="ts">
import { PropType, onMounted, onUnmounted, ref, h } from "vue";
import { type FormItemProps } from "./utils/types";
import { takePhoto, expelExam, getPhotoList } from "@/api/exam";
import { message } from "@/utils/message";
import { ElMessageBox } from "element-plus";
import camera from "@/assets/camera/no_camera.png";
import photoForm from "./photos.vue";
import { addDialog, closeDialog } from "@/components/ReDialog";

defineOptions({
  name: "RealTimeCard"
});

const props = defineProps({
  product: {
    type: Object as PropType<FormItemProps>
  }
});

const timer = ref(null);
const formRef = ref();

const handleClickTakePhoto = (product: FormItemProps) => {
  takePhoto({
    studentId: product.uid
  })
    .then(_res => {})
    .catch(_error => {});
};

const handleExpelExam = (product: FormItemProps) => {
  ElMessageBox.confirm(
    `确认要<strong>踢出</strong><strong style='color:var(--el-color-primary)'>${product.fullname}</strong>用户吗?`,
    "系统提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      dangerouslyUseHTMLString: true,
      draggable: true
    }
  )
    .then(() => {
      expelExam({
        taskId: product.taskid,
        studentId: product.uid
      })
        .then(res => {
          if (res.success) {
            message("踢出成功", { type: "success" });
          } else {
            message("踢出失败:" + res.errMsg, { type: "error" });
          }
        })
        .catch(_error => {
          message("踢出失败:" + JSON.stringify(_error), { type: "error" });
        });
    })
    .catch(() => {});
};

const handleDetailPhoto = (product: FormItemProps) => {
  getPhotoList({
    taskId: product.taskid,
    studentId: product.uid
  })
    .then(res => {
      if (res.success) {
        message("查询成功", { type: "success" });
        addDialog({
          title: "抓拍列表",
          props: {
            list: res.data.list
          },
          width: "40%",
          draggable: true,
          fullscreen: true,
          fullscreenIcon: true,
          closeOnClickModal: false,
          contentRenderer: () => h(photoForm, { ref: formRef }),
          footerButtons: [
            {
              label: "确定",
              type: "success",
              btnClick: ({ dialog: { options, index } }) => {
                closeDialog(options, index); // 关闭弹框
              }
            }
          ]
        });
      } else {
        message("查询失败:" + res.errMsg, { type: "error" });
      }
    })
    .catch(_error => {
      message("查询失败:" + JSON.stringify(_error), { type: "error" });
    });
};

onMounted(() => {
  timer.value = setInterval(() => {
    if (props.product.taskZt == 7) {
      handleClickTakePhoto(props.product);
    }
  }, 60 * 1000);
});

onUnmounted(() => {
  clearInterval(timer.value);
});
</script>

<template>
  <el-card>
    <div class="w-full flex justify-center">
      <img width="150" height="150" :src="product.photo" v-if="product.photo" />
      <img width="150" height="150" :src="camera" v-if="!product.photo" />
    </div>
    <div class="w-full flex justify-center">
      <h2 style="color: red">{{ product.fullname }}</h2>
    </div>
    <div class="w-full flex justify-center" v-if="product.starttime">
      <h3 style="color: rgb(224 192 51)">入场: {{ product.starttime }}</h3>
    </div>
    <div class="w-full flex justify-center" v-if="product.endtime">
      <h3 style="color: rgb(224 192 51)">离场: {{ product.endtime }}</h3>
    </div>
    <div class="w-full flex justify-center">
      <el-button v-if="product.taskZt == 0" type="danger"
        >还未参加考试</el-button
      >
      <el-button v-if="product.taskZt == 1" type="danger"
        >考试数据异常</el-button
      >
      <el-button v-if="product.taskZt == 2" type="danger"
        >考试已经过期</el-button
      >
      <el-button v-if="product.taskZt == 3" type="info">考试还没开始</el-button>
      <el-button v-if="product.taskZt == 4" type="danger"
        >还未参加考试</el-button
      >
      <el-button v-if="product.taskZt == 5" type="danger"
        >中途退出考试</el-button
      >
      <el-button v-if="product.taskZt == 6" type="success"
        >已经参加考试</el-button
      >
      <div class="w-full flex justify-center" v-if="product.taskZt == 7">
        <el-button type="danger" @click="handleClickTakePhoto(product)">
          抓怕
        </el-button>
        <el-button type="success" @click="handleExpelExam(product)">
          踢出
        </el-button>
      </div>
      <el-button type="info" @click="handleDetailPhoto(product)">
        预览
      </el-button>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
.main {
  background: #bfbaba;
}

.list-card-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
  overflow: hidden;
  cursor: pointer;
  border-radius: 3px;

  &_detail {
    flex: 1;
    min-height: 140px;
    padding: 24px 32px;

    &--logo {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 56px;
      font-size: 32px;
      color: #0052d9;
      background: #e0ebff;
      border-radius: 50%;

      &__disabled {
        color: #a1c4ff;
      }
    }

    &--operation {
      display: flex;
      height: 100%;

      &--tag {
        border: 0;
      }
    }

    &--name {
      margin: 24px 0 8px;
      font-size: 16px;
      font-weight: 400;
    }

    &--desc {
      display: -webkit-box;
      height: 40px;
      margin-bottom: 24px;
      overflow: hidden;
      font-size: 12px;
      line-height: 20px;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }

  &__disabled {
    .list-card-item_detail--name,
    .list-card-item_detail--desc {
      color: var(--el-text-color-disabled);
    }

    .list-card-item_detail--operation--tag {
      color: #bababa;
    }
  }
}
</style>
